<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>file to html</title>
</head>

<body>
  <input type="file" name="src" id="src" />
  <a href="#" id="dl"></a>
  <script id="clicker">
    document.getElementById("dl").click();
  </script>
  <script>
    const input = document.getElementById("src");
    const a = document.getElementById("dl");
    input.addEventListener("change", () => {
      a.href = "#";
      a.download = a.innerText = String();
      const [file] = input.files;
      const reader = new FileReader();
      reader.addEventListener("load", () => {
        const a = document.getElementById("dl");
        a.href = reader.result;
        a.download = file.name;
        a.innerText = "Download";
        const res = new Blob([
          `<!DOCTYPE html>
<html><head>
<meta charset="UTF-8" />
<title>Download</title>
</head><body>`,
          a.outerHTML,
          document.getElementById("clicker").outerHTML,
          "</body></html>"
        ], {
          type: "text/html"
        });
        a.href = "#";
        a.innerText = String();
        const reader1 = new FileReader();
        reader1.addEventListener("load", () => {
          a.href = reader1.result;
          a.download += ".html";
          a.innerText = a.download;
          a.click()
        });
        reader1.readAsDataURL(res)
      });
      reader.readAsDataURL(file)
    });
  </script>
</body>

</html>
